import { mapGetters, mapActions } from "vuex"
export const mixins = {
    props: ["roleIndex"],
    data() {
        return {
            scale: 1,
            fiter: 1
        }
    },
    computed: {
        //角色属性
        roleStyle() {
            return {
                position: "absolute",
                background: "url(" + this.roleIndex.roleImg + ") 0 0/100% 100%",
                width: this.roleIndex.roleWidth,
                height: this.roleIndex.roleHeight,
                left: this.roleIndex.roleLeft,
                top: this.roleIndex.roleTop,
                transition: "all 0.5s",
                transform: "scale(" + this.scale + ")",
                zIndex: 98
            }
        },
        //角色对话
        roleDialogue() {
            let dialoguesList = []
            if (this.roleIndex.dialogueContext) {
                const context = JSON.parse(this.roleIndex.dialogueContext)
                for (let j = 0, len = context.contents.length; j < len; j++) {
                    dialoguesList.push({
                        content: context.contents[j],
                        background: this.roleIndex.roleAvatarUrl,
                        audioUrls: context.audioUrls[j],
                        serialNumbers: context.serialNumbers[j]
                    })
                }
            }
            return dialoguesList
        },
        ...mapGetters("wordStatus", {
            dialogueSerialNumbers: "getDialogueSerialNumbers"
        }),
        ...mapGetters("picbookListStatus", {
            picbookIndex: "getPicbookIndex"
        }),
        ...mapGetters("roleStatus", {
            roleAwards: "getRoleAwards"
        }),
        ...mapGetters("personalStatus", {
            userCollect: "getUserCollect"
        })
    },
    methods: {
        //角色点击动画
        touchAnima: function () {
            this.clickMusic()
            this.scale = 1.2
        },
        //角色结束动画
        touchAnimaEnd: function () {
            this.scale = 1
        },
        //记录角色
        collectRole: function () {
            this.roleIndex.picbookId = this.picbookIndex.id
            const roleAwardsImage = this.roleAwards.filter(item => { return item.roleName === this.roleIndex.explain.replace(/\d+$/, '') })
            if(roleAwardsImage.length > 0){
                this.roleIndex.cardImage = this.roleAwards.filter(item => { return item.roleName === this.roleIndex.explain.replace(/\d+$/, '') })[0].imageUrl
            }
            this.insertRoleCollect(this.roleIndex)
            this.userSaveDate("userCollect", this.userCollect)
        },
        ...mapActions("personalStatus", ["insertRoleCollect"])
    },
    watch: {
        dialogueSerialNumbers: function (number) {
            if (number === 0) {
                this.touchAnimaEnd()
            }
        }
    }
}
